<template>
  <div class="wrap">
		<view class="search">
			<u-search v-model="searchForm.name"
				@custom="handleSearch"
				@search="handleSearch"
				class="search-input"
				placeholder="请输入文件名称">
			</u-search>
		</view>
    <scroll-view @scrolltolower="handleLoadMore" class="scroll-list" scroll-y="true">
      <div class="view-container">
        <u-card
          v-for="(item, index) in dataList"
          :key="index + '' + item.id"
          class="task-list-item" :border="false" padding="20" margin="20rpx">
          <view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
            <view style="display: flex;align-items: center;font-size: 30rpx;">
              {{ item.name }}
            </view>
            <view class="row-check">
              <label>
                <u-radio-group v-model="value">
                  <u-radio :name="item.id"></u-radio>
                </u-radio-group>
              </label>
            </view>
          </view>
          <view slot="body">
            <u-row gutter="16">
              <u-col span="12">
                <view class="apply-text"><span>桥梁编号：</span>{{ item.bridgeCode }}</view>
              </u-col>
              <u-col span="12">
                <view class="apply-text"><span>所属路线：</span>{{ item.routeCode + '(' + item.routeName + ')'}}</view>
              </u-col>
              <u-col span="12">
                <view class="apply-text"><span>管养单位：</span>{{ item.deptName }}</view>
              </u-col>
            </u-row>
          </view>
        </u-card>
      </div>
      <u-divider>已经到底了</u-divider>
    </scroll-view>
    <div class="view-bottom">
      <u-button class="btn" type="primary" @click="handleConfirm">确定</u-button>
      <u-button class="btn" @click="handleCancel">取消</u-button>
    </div>
  </div>
</template>

<script>
import ebus from '@/components/libs/ebus.js'
import FilterView from '@/components/filter/filter.vue'
import ds from '@/api/service/service.js'
import fileSer from '@/api/service/file.js'

export default {
  components: {
    FilterView
  },
  data () {
    return {
			params: {},
      searchForm: {
        name: ''
      },
      // 当前的数据列表
      dataList: [],
      value: '',
      pageCount: 0,
      pageIndex: 1,
      pageSize: 20
    }
  },

	onNavigationBarButtonTap(arg) {
		// 上传
		if (arg.category === 'upload') {
			uni.navigateTo({
				url: '/pages/music/upload?type=music'
			})
		}
	},

	onLoad (params) {
		this.params = params
	},

  beforeMount () {
    this.initView()
  },

  methods: {
    initView () {
      this.handleSearch()
    },
    // 搜索数据
    handleSearch () {
      this.pageIndex = 1
      this.dataList = []
      // 查询养护方法
      this.loadDataList()
    },
    // 加载数据列表
    loadDataList () {
      let curParam = this.getParams()
      let user = this.getCurrentUser() || {}
      let params = {
        userId: user.userId,
				type: this.params.type
      }
			let keyword = String(this.searchForm.name || '').trim()
      // 条件
      for (let key in this.searchForm) {
        let value = this.searchForm[key]
        if (String(value).trim() === '' || value === undefined || value === null || key === 'name') {
          continue
        }
        params[key] = value
      }
      fileSer.queryListByPage(params, {
        operators: [
          {field: 'name', operator: 'LIKE'},
          {field: 'type', operator: 'LIKE'}
        ],
        limit: { pageIndex: this.pageIndex, pageSize: this.pageSize }
      }).then(res => {
        this.dataList = this.dataList.concat(res.data)
        this.pageCount = res.page?.pageCount || 0
      })
    },
    // 加载更多
    handleLoadMore () {
      this.pageIndex += 1
      if (this.pageIndex > this.pageCount) {
        return true
      }
      this.loadDataList()
    },
    handleConfirmFilter () {
      this.handleSearch()
      this.$refs.filter.handleCloseFilter()
    },
    handleResetFilter () {
      this.searchForm = {
        name: ''
      }
      this.handleSearch()
    },

    handleCheck (item) {},
    // 确认
		handleConfirm () {
      let checkedList = this.dataList.filter(item => {
        return String(item.id) === String(this.value)
      })
      if (!checkedList.length) {
        this.$u.toast('请选择数据')
        return false
      }
      ebus.$emit('onConfirmBridge', checkedList)
      this.goBack()
		},
    // 取消
		handleCancel () {
      this.goBack()
		}
  }
}
</script>

<style lang="scss">
.wrap {
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  height: 100vh;
  padding-bottom: 60px;
  background: #f5f5f5;
}
.scroll-list {
  padding-bottom: 120px;
}
.search {
  display: flex;
  align-items: center;
  .search-input {
    flex: 1;
  }
  /deep/ .search-filter {
    margin-left: 8px;
  }
}
.row-check {
  padding-left: 10px;
  /deep/ .u-checkbox__label,
  /deep/ .u-radio__label {
    display: none;
  }
}
.task-list-item {
  flex: 1;
}
.apply-text {
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.view-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  z-index: 9;
  background: #fff;
  display: flex;
  .btn {
    flex-basis: 48%;
  }
}
</style>
